<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .content {
            display: flex;
        }

        .content .left {
            list-style: none;
            width: 200px;
            background-color: rgb(44, 56, 68);
            color: rgb(201, 197, 197);
        }

        .content .left li {
            box-sizing: border-box;
            text-align: center;
            width: 200px;
            line-height: 55px;
            padding: 0 20px;
        }

        .content .left span {
            margin-left: 10px;
        }

        .content .left li:last-child {
            padding-right: 80px;
            background-color: darkslategray;
        }

        .content .left li:nth-child(1) {
            background-color: darkslategray;
        }

        .content .left li:nth-child(2) {
            background-color: darkslategray;
            padding-right: 80px;
        }

        .content .left li:nth-child(3) {
            background-color: darkslategray;
            padding-right: 80px;
        }

        .content .right {
            padding: 15px;
            flex: 1;
            border: 1px solid black;
        }

        .content .right header .iconfont {
            font-size: 20px;
        }

        .content .right header {
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
        }

        .right span {
            font-size: 16px;
            margin-left: 10px;
        }

        .right img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        .moddle nav {
            margin-bottom: 15px;
            width: 100%;
            height: 20px;
            border: 1px solid grey;
        }
        .moddle nav span:nth-child(2) {
            width: 50px;
            height: 20px;
            background-color: dodgerblue;
            color: white;
        }

        .name {
            display: flex;
            margin-bottom: 15px;
        }

        .name p {
            margin-right: 10px;
        }

        .name input {
            padding-left: 20px;
            margin-right: 10px;
        }

        .name button {
            border: none;
            border-radius: 3px;
            width: 80px;
            margin-right: 10px;
            /* background-color: blue; */
        }

        .name button:nth-child(3) {
            color: white;
            background-color: blue;
        }

        .gunneng {
            display: flex;
            margin-bottom: 15px;
        }

        .gunneng button {
            width: 70px;
            margin-right: 10px;
            color: dodgerblue;
            border: none;
            border: 1px solid dodgerblue;
            background-color: rgba(100, 148, 237, 0.34);
        }

        .gunneng button:nth-child(2) {
            background-color: rgba(127, 255, 212, 0.368);
            color: green;
        }

        .gunneng button:nth-child(3) {
            color: pink;
            background-color: rgba(255, 192, 203, 0.436);
        }

        .gunneng button:nth-child(4) {
            background-color: rgba(255, 255, 0, 0.043);
            color: yellow;
        }

         table {
            width: 100%;
            text-align: center;
        }

        table tr th:first-child,
        table tbody td:first-child {
            text-align: left;
        }
        table tbody td:nth-child(5).error {
            background-color: red;
            border-radius: 10px;
        }
        .foot{
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="content">
        <ul class="left">
            <li>管理系统<span></span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
            <li class="iconfont icon-home"><span>管理系统</span></li>
        </ul>
        <div class="right">
            <header>
                <span class="iconfont icon-xitongrizhi"></span>
                <div class="iconfont icon-yonghu"><span><img src="./img/login-background.jpg" alt=""></span></div>
            </header>
            <div class="moddle">
                <nav>
                    <span>首页</span>
                    <span>岗位管理</span>
                </nav>
            </div>
            <div class="name">
                <p>岗位名称</p>
                <input type="text" placeholder="请输入岗位名称">
                <button>搜索</button>
                <button>重置</button>
            </div>
            <div class="gunneng">
                <button>+ 新增</button>
                <button>- 修改</button>
                <button>/ 删除</button>
                <button># 导出</button> 
            </div>
                <table>
                    <thead>
                        <tr>
                            <th>岗位编号</th>
                            <th>岗位编码</th>
                            <th>岗位名称</th>
                            <th>岗位排序</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            <div class="foot">
                <button class="pre">上一页</button>
                <button class="next">下一页</button>
            </div>
        </div>
    </div>
</body>
</html>
<script src="./axios.min.js"></script>
<script>
    //axios全局设置请求拦截器
    axios.interceptors.request.use(
        (config) => {  //这个回调函数在每次发请求到服务器端之前都会调用执行
            //设置请求头参数
            config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
            return config
        },
        (error) => {
            return Promise.reject(error)
        }
    )
    //设置响应拦截器
    axios.interceptors.response.use(
        (res) => {
            return res
        },
        (error) => {
            if (error.response.status == 401) {
                alert('登录过期，请重新登录')
                localStorage.removeItem('token')
                location.href = './login.html'
            } else if (error.response.status == 404) {
                alert('访问路径有误')
            } else if (error.response.status == 500) {
                alert('服务器内部错误')
            }
            return Promise.reject(error)
        }
    )


    var input = document.querySelector('.input-box input')
    var searchbtn = document.querySelector('.input-box button')
// 删除
    var tbody = document.querySelector('tbody')
    tbody.onclick = (e) => {
        if (e.target.classList.contains('icon-shanchu')) {
            axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
                render(res.data.list)
            })
        }
    }
    //渲染列表
    function render(data) {
        var str = data.map((item) => {
            return `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.count}</td>
                        <td>${item.phone}</td>
                        <td>${item.ingroup}</td>
                        <td class="${item.state ? '' : 'error'}">${item.state ? '正常' : '异常'}</td>
                        <td>${item.time}</td>
                        <td>
                            <span class="iconfont icon-bianji"></span>
                            <span class="iconfont icon-shanchu" data-phone="${item.phone}"></span>
                        </td>
                    </tr>
                    `
        }).join('')
        if (str == '') {
            str = '<tr><td style="text-align:center;color:red">未查询到数据!</td></tr>'
        }
        document.querySelector('tbody').innerHTML = str
    }

    var pre = document.querySelector('.foot .pre')
    var next = document.querySelector('.foot .next')
    var page = 1
    axios.get('/user/list', { params: { page: page, count: 3 } }).then((res) => {
        render(res.data.list)
    })
    //下一页
    next.onclick = () => {
        pre.disabled = false
        axios.get('/user/list', { params: { page: ++page, count: 3 } }).then((res) => {
            render(res.data.list)
        })
        if (page == 3) {
            next.disabled = true
        }
    }
    //上一页
    pre.onclick = () => {
        next.disabled = false
        axios.get('/user/list', { params: { page: --page, count: 3 } }).then((res) => {
            render(res.data.list)
        })
        if (page == 1) {
            pre.disabled = true
        }
    }
</script>